<template>
    <!-- 搜索框 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button class="bot">重置</el-button>
                <!--  -->
                <el-button class="bot" type="primary" @click="searchFn">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <!-- :model="listParams" -->
            <el-form ref="searchFormRef">
                <el-form-item label="优惠卷名称:">
                    <!-- @keyup.enter 回车事件 -->
                    <!--  -->
                    <el-input placeholder="优惠卷名称" v-model="listparams.keyword" />
                </el-form-item>
                <el-form-item label="优惠卷类型:">
                    <!-- 优惠卷选择器 -->
                    <el-select v-model="value" clearable placeholder="全部" @change="selectFn">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>

        </div>
    </div>

    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <div>
            <!-- @click="addUser" -->
            <el-button class="btn">添加</el-button>

        </div>
    </div>

    <!-- 表单 -->
    <div>
        <!-- -->
        <el-table border ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column type="selection" />
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column property="name" label="优惠卷名称" />
            <el-table-column label="优惠卷类型">
                <template #default="scope">
                    {{
                            scope.row.type == 0
                                ? "全场赠卷"
                                : scope.row.type == 1
                                    ? "会员赠卷"
                                    : scope.row.type == 2
                                        ? "购物赠卷"
                                        : scope.row.type == 3
                                            ? "注册赠卷"
                                            : ""
                    }}
                </template>
            </el-table-column>
            <el-table-column property="startDate" label="可使用商品">
                <template #default="scope">
                    {{
                            scope.row.useType == 0
                                ? "全场通用"
                                : scope.row.useType == 1
                                    ? "指定分类"
                                    : scope.row.useType == 2
                                        ? "指定商品"
                                        : ""
                    }}
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="使用门槛">
                <template #default="scope">
                    满{{ scope.row.minPoint }}元可用
                </template>
            </el-table-column>
            <el-table-column label="面值">
                <template #default="scope">
                    {{ scope.row.amount }}元
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="适用平台">
                <template #default="scope">
                    {{
                            scope.row.platform == 0
                                ? "全平台"
                                : scope.row.platform == 1
                                    ? "移动平台"
                                    : scope.row.platform == 2
                                        ? "PC平台"
                                        : ""
                    }}
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="有效期" width="165px">
                <template #default="scope">
                    {{ fomatDate(scope.row.startTime) }}至{{ fomatDate(scope.row.endTime) }}
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="状态">
                <template #default="scope">
                    {{ scope.row.endTime > state.Time ? '未过期' : '已过期' }}
                </template>
            </el-table-column>

            <el-table-column property="Address" label="操作" width="200px">
                <template #default="scope">
                    <el-button type="primary" text size="small" @click="lookupFn(scope.row.id)">查看</el-button>
                    <el-button type="primary" text size="small" @click="handelShow(scope.row.id)">编辑</el-button>
                    <!--  @click="delectFn(scope.row.id)" -->
                    <el-button type="primary" text size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="listparams.pageNum" v-model:page-size="listparams.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
                @current-change="pageNumChange" :page-sizes="[5, 10, 20]" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>
import { user } from "@/api";
import { Search, Tickets } from "@element-plus/icons-vue";
import { nextTick, reactive, ref, toRefs } from "vue";
import { fomatDate } from "@/utils"
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useRouter } from "vue-router"
const router = useRouter()
const value = ref('')
const options = [
    {
        value: 0,
        label: '全场赠卷',
    },
    {
        value: 1,
        label: '会员赠卷',
    },
    {
        value: 2,
        label: '购物赠卷',
    },
    {
        value: 3,
        label: '注册赠卷',
    }

]
interface Istate {
    listparams: couponList
    tableData: couponListModel[]
    total: number
    Time: string
    selectNum: number
}

const state = reactive<Istate>({
    tableData: [],
    listparams: {
        pageNum: 1,
        pageSize: 10,
        keyword: '',
    },
    total: 0,
    Time: '',
    selectNum: 0

})

//获取一个日期
const c = new Date()
const nowDate = (now: any) => {
    var year = now.getFullYear(); //年份
    var month = now.getMonth() + 1; //月份（0-11）
    var date = now.getDate(); //天数（1到31）
    var hour = now.getHours(); //小时数（0到23）
    var minute = now.getMinutes(); //分钟数（0到59）
    var second = now.getSeconds(); //秒数（0到59） 
    return (
        year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
    )
}
state.Time = nowDate(c)

//获取数据
const getlist = () => {
    user.getCouponlistApi(state.listparams).then(res => {
        if (res.code === 200) {
            console.log(res.data);
            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
}
getlist()


//点击的ID
const CupID = ref(0)


//查看
const lookupFn = (id: number) => {
    router.push(`/sms/couponHistory?id=${id}`)
}
//编辑 
const handelShow = (id: number) => {
    router.push(`/sms/updateCoupon?id=${id}`)
}
//分页功能
const pageSizeChange = () => {
    getlist()
}
const pageNumChange = () => {
    getlist()
}

//选择器
const selectFn = (val: any) => {
    state.selectNum = val
    console.log(state.selectNum);

}

//查询优惠卷
const searchFn = () => {
    user.searchConupApi({ type: state.selectNum, pageNum: state.listparams.pageNum, pageSize: state.listparams.pageSize, keyword: state.listparams.keyword }).then(res => {
        if (res.code === 200) {
            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
}

let { listparams, tableData, total, selectNum } = toRefs(state)
</script>



<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 30px 0;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }
}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #eee;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}

.el-select {
    margin-right: 40px;
}

.el-form {
    display: flex;

    .el-form-item {
        margin-right: 50px;
    }
}
</style>